<template>
  <div class="filemain">
    <el-row class="fileheader">
      <el-col :span="6"
        ><div class="grid-content bg-purple">全部文件</div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple-light"></div
      ></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" class="right"
        ><div class="grid-content bg-purple-light">
          已加载 <i>3</i>个文件
        </div></el-col
      >
    </el-row>

    <el-table
      ref="multipleTableRef"
      size="large"
      :data="fileMsg"
      style="width: 100%"
      height="400"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="文件名" width="400" property="address">
        <template #default="scope">
          <!-- <span class="element-iconfont el-iconweibiaoti-_huabanfuben"></span>
          <span class="element-iconfont el-iconshipin"></span> -->
          <span class="element-iconfont el-iconwendang"></span>
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <el-table-column property="size" label="大小" width="80" />
      <el-table-column property="currentData" label="修改日期" width="200" />
      <el-table-column property="" label="" show-overflow-tooltip>
        <template #default>
          <!-- <span class="element-iconfont el-iconweibiaoti-_huabanfuben"></span>
          <span class="element-iconfont el-iconshipin"></span> -->
          <svg
            class="icon"
            width="20"
            height="20"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-042ca774=""
          >
            <path
              fill="currentColor"
              d="M128 320v576h576V320H128zm-32-64h640a32 32 0 0132 32v640a32 32 0 01-32 32H96a32 32 0 01-32-32V288a32 32 0 0132-32zM960 96v704a32 32 0 01-32 32h-96v-64h64V128H384v64h-64V96a32 32 0 0132-32h576a32 32 0 0132 32zM256 672h320v64H256v-64zm0-192h320v64H256v-64z"
            ></path>
          </svg>
          <svg
            class="icon"
            width="20"
            height="20"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-042ca774=""
          >
            <path
              fill="currentColor"
              d="M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-253.696l236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64v450.304z"
            ></path>
          </svg>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn, ElCol, ElRow } from "element-plus";
// import { Download, DocumentCopy } from "@element-plus/icons-vue";
import service from "../../../../../mock/indexFile.js";
import { reactive, ref, onMounted } from "vue";
export default {
  setup() {
    const fileMsg = ref([]);
    const tableData = reactive([]);
    onMounted(async () => {
      const fileData = await service.getDate();
      // table.value = tableData.data.result;
      fileMsg.value = fileData.data.result;
      console.log(fileData.data.result);
    });
    return {
      tableData,
      fileMsg,
    };
  },
  components: {
    ElCol,
    ElRow,
    ElTable,
    ElTableColumn,
    // Download,
    // DocumentCopy,
  },
};
</script>

<style lang="less" scoped>
/deep/ #icon {
  font-size: 20px;
}
/deep/.el-table__cell {
  //表身行高
  padding: 20px 0;
  height: 100px;
}
/deep/.el-table__header thead tr th {
  //表头行高
  padding: 10px;
}
.element-iconfont {
  font-size: 50px;
}
.filemain {
  // background: cadetblue;
  .fileheader {
    .el-col {
      line-height: 40px;
    }
    font-size: 14px;
    .right {
      text-align: center;
    }
  }
  padding: 0;
}

header {
  padding: 0;
  margin-top: 20px;
}
.el-col-6 {
  display: flex;
  align-items: center;
}
.el-main {
  padding: 0;
}
/deep/.el-table_1_column_5 {
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
// /deep/.el-table__cell {
//   //表身行高
//   // margin-top: 10px;
//   padding: 10px 0;
//   height: 100px;
// }
/deep/tbody tr .el-table__cell .cell {
  line-height: 100px;
  display: flex;
  align-items: center;
  height: 75px;
}
/deep/.file .el-main {
  margin-left: 20px;
}
 /deep/.el-main {
      // background-color: aquamarine;
      padding: 10px;
    }
</style>
